<template>
    <div :class="{'TabBarItem': true, 'selected': item.selected}" @click="$emit('click')">
        <img class="icon" :src=" item.selected ? item.selectIcon : item.icon" alt="">
        <span class="title">{{item.title}}</span>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Prop} from 'vue-property-decorator'

    @Component({
        name: 'TabBarItem'
    })
    export default class extends Vue {
        @Prop()
        private item!: any;
    }
</script>

<style scoped lang="less">
    .TabBarItem {
        height: 1.0rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding: 0 0.2rem;
        & .icon {
            display: inline-block;
            width: 0.4rem;
            height: 0.4rem;
        }
        & .title {
            font-size: 0.24rem;
            color: #999999;
        }
    }
    .selected {
        & .title {
            color: #000000;
        }
    }
</style>
